<template>
  <div class="merchantCard">
    <div class="header" @click="onDumpMerchantDetailPage()">
      <img :src="props.merchantData.logoFile.url" alt="">
      <ul>
        <li>
          <div class="shopName">{{ props.merchantData.name }}</div>
          <div class="tagName" v-if="props.merchantData.settled === 1">
            <img :src="certifiedBadge" alt="">
            <span>已入驻</span>
          </div>
          <div class="tagName special" v-if="props.merchantData.settled !== 1">
            <span>未入驻</span>
          </div>
        </li>
        <li>
          <div>
            <img :src="starLogo" alt="">
            <span>{{ props.merchantData.score || 0.0 }}</span>
            <span>（{{ props.merchantData.scoreNum || 0 }}）</span>
          </div>
          <div>{{ formatDistance(props.merchantData.distance) }}</div>
        </li>
      </ul>
    </div>
    <div class="content" v-if="props.merchantData.goods && props.merchantData.goods.length">
      <ul>
        <li
          @click="onDumpGoodsDetailPage(item)"
          v-for="item in props.merchantData.goods"
          :key="item.id"
        >
          <van-image
            width="100%"
            height="100"
            radius="12"
            fit="cover"
            :src="item.picFile.url"
          />
          <div>{{ item.name }}</div>
          <div>
            <span>{{ item.price }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup name="merchantCard">
import { formatDistance } from "@/utils/index.js";
import certifiedBadge from "@/assets/image/certified-badge.png";
import starLogo from "@/assets/image/Star.png";

const props = defineProps({
  merchantData: Object
});

//查看商家详情
import { useRouter } from 'vue-router'
const router = useRouter()
const onDumpMerchantDetailPage = () => {
  const merchantId = props.merchantData.id;
  router.push({
    name: "merchantDetailPage",
    query: { id: merchantId }
  });
}

//查看商品详情
const onDumpGoodsDetailPage = (data) => {
  const goodsId = data.id;
  router.push({
    name: "goodsDetailPage",
    query: { goodsId }
  });
}

</script>
<style lang="less" scoped>
div.merchantCard {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 16px;
  background: #ffffff;
  >div.header {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    >img {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      margin-right: 10px;
    }
    >ul {
      width: calc(100% - 48px - 10px);
      >li:first-child {
        overflow: hidden;
        display: flex;
        align-items: center;
        div.shopName {
          float: left;
          width: calc(100% - 55px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 18px;
          font-weight: bold;
        }
        div.tagName {
          float: left;
          width: 55px;
          height: 18px;
          border-radius: 12px;
          background: rgba(37, 197, 47, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
          &.special {
            background: rgba(0 ,0, 0, 0.1);
            span {
              color: #000000
            }
          }
          img {
            width: 14px;
            height: 14px;
          }
          span {
            color: rgba(22, 181, 33, 1);
            font-size: 12px;
          }
        }
      }
      >li:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        >div:first-child {
          display: flex;
          align-items: center;
          >img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
          >span:nth-child(2) {
            font-size: 14px;
            font-weight: bold;
          }
          >span:nth-child(3) {
            font-size: 14px;
            color: rgba(156, 156, 156, 1);
          }
        }
        >div:nth-child(2) {
          font-size: 14px;
          color: rgba(87, 89, 88, 1)
        }
      }
    }
  }
  >div.content {
    margin-top: 12px;
    ul {
      display: flex;
      justify-content: start;
      align-items: start;
      li {
        width: calc((100% - 24px) / 3);
        &:not(:last-child) {
          margin-right: 12px;
        }
        >div:nth-child(2) {
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          font-weight: bold;
        }
        >div:nth-child(3) {
          line-height: 20px;
          span {
            font-size: 12px;
            font-weight: bold;
            color: rgba(251, 93, 59, 1);
          }
        }
      }
    }
  }
}
</style>
